
<template>

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm"        >
  <h2><center>{{title}}</center></h2>
  <el-form-item v-for=" item in gxdata" :label="item.title" :prop="item.title">
    <el-input v-model="ruleForm[item.title]"></el-input>
  </el-form-item>
<el-form-item>
  <el-button type="primary" @click="submitForm('ruleForm')">校验</el-button>
  <el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
<el-form-item>
  <el-button @click="backPage()" icon="el-icon-back"></el-button>
  <el-button @click="randomPage()">随机</el-button>
  <el-button @click="rightPage()" icon="el-icon-right"></el-button>
</el-form-item>
</el-form>

</template>
<script>
export default {
  layout: 'default',
  data() {
    return {
      title:"04成本管理4-03010",
      gxdata : [
        {title:'1、',an:"规划成本管理"},
        {title:'2、',an:"估算成本"},
        {title:'3、',an:"制定预算"},
        {title:'4、',an:"控制成本"},
      ],
      ruleForm: {},
      rules: {},

    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('恭喜!全部正确！');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
     randomPage(){
      var routes = this.$router.options.routes;
      var ran = Math.floor(Math.random()*(routes.length-1))
      this.$router.push(routes[ran].path)
    },
    rightPage(){
      var routes = this.$router.options.routes;
      var arrIndex = routes.findIndex(object => object.path === this.$router.currentRoute.path)
      this.$router.push(routes[arrIndex+1].path)
    },
    backPage(){
      var routes = this.$router.options.routes;
      var arrIndex = routes.findIndex(object => object.path === this.$router.currentRoute.path)
      this.$router.push(routes[arrIndex-1].path)
    }

  },
  created() {
    this.gxdata.filter(item => {
      Object.assign( this.rules, {[item.title] :[
          { required: true, message: '请输入', trigger: 'blur' },
          { validator : (rule,value,callback,source,options) =>{
            if(item.an !== value){
                callback(item.an)
              } else {
                callback()
              }
            }, trigger: 'clear' }
        ]
      })

    })
  }
}
</script>

